<template>
  <div id="app">
    <transition :name="transitionName">
      <router-view class="Router"/>
    </transition>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Watch } from 'vue-property-decorator';
import { State, Mutation } from 'vuex-class';
@Component
export default class HelloWorld extends Vue {
  // 切换动画名  前进：slide-left 后退：slide-right
  private transitionName: string = 'slide-left';
  // 获取状态管理中的路由回退状态
  @State private isBack!: boolean;
  @Mutation private SET_ISBACK!: any;
  /**
   * 路由监听
   */
  @Watch('$route') private watchRoute(to: any, from: any) {
    console.log('this.isBack', this.isBack);
    // 监听路由变化时的状态为前进还是后退
    if (this.isBack) {
　　　　this.transitionName = 'slide-right';
    } else {
　　　　this.transitionName = 'slide-left';
　　}
    // this.SET_ISBACK(false);
// 　　this.$router.isBack = false;
  }
}
</script>

<style lang="scss">
@import './css/font-mixin.scss';
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
input,button,select,textarea{ outline:none;}
img{content: normal}
ul{list-style: none;}
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
.Router {
     position: absolute;
     width: 100vw;
     height: 100vh;
     transition: all .3s ease;
     top: 0;
}
.slide-right-enter-active,
.slide-right-leave-active,
.slide-left-enter-active,
.slide-left-leave-active {
  will-change: transform;
  transition: all 500ms;
  position: absolute;
}
.slide-right-enter {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}
.slide-right-leave-active {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}
.slide-left-enter {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}
.slide-left-leave-active {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}
.ignore {
  @include font-dpr(16px);
}
</style>
